<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-12-19 10:11:07
 * @LastEditors: charles
 * @LastEditTime: 2021-12-19 10:11:08
-->
<template>
  <div>
    <!-- 输入框和录入按钮开始 -->
    <div class="btns">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-row>
          <el-col :span="18">
            <el-form-item>

              <el-input v-model="form.user" placeholder="请输入课程名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.region" placeholder="请选择选课状态">
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-form-item>
              <el-button type="primary">录入</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 输入框和录入按钮结束 -->

    <!-- 表格开始 -->
    <div class="table">
      <el-table :data="courseData" border style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="courseCode" label="编号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="courseName" label="课程名称" width="360" align="center">
        </el-table-column>
        <el-table-column prop="category" label="课程类型" align="center">
        </el-table-column>
        <el-table-column prop="credit" label="学分" align="center">
        </el-table-column>
        <el-table-column prop="academy" label="开设学院" align="center">
        </el-table-column>
        <el-table-column prop="status" label="选课状态" align="center">
          <!-- 使用scope访问当前行数据 -->
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" effect="dark" type="success">已选</el-tag>
            <el-tag v-else effect="dark" type="danger">未选</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <!-- <template v-slot="scope"> -->
          <div>
            <el-link :underline="false" type="success" >选课 </el-link>

            <el-link :underline="false" type="primary">详情 </el-link>

            <el-link :underline="false" type="danger">结束 </el-link>

            <el-link :underline="false" type="warning">退选 </el-link>
          </div>
          <!-- </template> -->
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->


    <!-- <el-button @click="backHandler">返回</el-button>
    学生详情 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {},

      courseData: [
        {
          id: 1,
          courseCode: 'R080304017',
          courseName: 'JAVA基础',
          category: 'Professional required',
          teacher: '仲兰芬教授',
          credit: 3.5,
          academy: '数学科学学院',
          selected: 50,
          number:50,
          status: 1,
          classTime: '周一第1-2节',
          classroom: '教101'
        },
        {
          id: 2,
          courseCode: 'R080304016',
          courseName: '数学建模',
          category: 'Professional required',
          teacher: '赵国忠教授',
          credit: 2.5,
          academy: '数学科学学院',
          selected: 50,
          number: 50,
          status: 1,
          classTime: '周二第3-4节',
          classroom: '教404'
        },
        {
          id: 3,
          courseCode: 'R080303008',
          courseName: '常微分方程',
          category: ' Professional basic',
          teacher: '李姝敏教授',
          credit: 4,
          academy: '数学科学学院',
          selected: 50,
          number: 49,
          status: 2,
          classTime: '周三第1-2节',
          classroom: '教303'
        },
        {
          id: 4,
          courseCode: 'R000001022',
          courseName: '大学体育Ⅳ',
          category: 'General required ',
          teacher: '谢权老师',
          credit: 1,
          academy: '体育学院',
          selected: 40,
          number: 35,
          status: 1,
          classTime: '周四第5-6节',
          classroom: '教404'
        },
        {
          id: 5,
          courseCode: 'R000001038',
          courseName: '毛泽东思想和中国特色社会主义理论体系概论',
          category: 'General required ',
          teacher: '张春梅老师',
          credit: 3,
          academy: '马克思主义学院',
          selected: 120,
          number: 120,
          status: 2,
          classTime: '周五第3-4节',
          classroom: '艺101'
        },
        {
          id: 6,
          courseCode: 'R000002028',
          courseName: '劳动通论-0004',
          category: 'General opation',
          teacher: '网络',
          credit: 2,
          academy: '教务处',
          selected: 200,
          number: 180,
          status: 1,
          classTime: '周六第1-2节',
          classroom: 'null'
        },
        {
          id: 7,
          courseCode: 'R080308002',
          courseName: '见习2',
          category: 'practice',
          teacher: '任殿臣老师',
          credit: 0.3,
          academy: '数学科学学院',
          selected: 50,
          number: 50,
          status: 2,
          classTime: '全天',
          classroom: '化101'
        },
        {
          id: 8,
          courseCode: 'R000001017',
          courseName: '大学英语提高（二）',
          category: 'General required',
          teacher: '郭荣教授',
          credit: 2,
          academy: '外国语学院',
          selected: 50,
          number: 50,
          status: 1,
          classTime: '周二第7-8节',
          classroom: '外101'
        }
      ],
    }

  },

  mounted() {
    let id = this.$route.query.id;
    alert(id);
  },
  methods: {
    backHandler() {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-link--inner {
  margin-left: 5px;
}
</style>